<div class="row">
  <x-button (click)="customTable()">自定义表格</x-button>
  <x-dialog title="表格" width="80%" height="80%" [(visible)]="visibleTable">
    <table class="custom-table">
      <tr>
        <th>用户</th>
        <th>邮箱</th>
        <th>状态</th>
      </tr>
      <tr>
        <td>admin</td>
        <td>admin@admin.com</td>
        <td>启用</td>
      </tr>
      <tr>
        <td>john</td>
        <td>john@john.com</td>
        <td>禁用</td>
      </tr>
      <tr>
        <td>jack</td>
        <td>jack@jack.com</td>
        <td>启用</td>
      </tr>
    </table>
  </x-dialog>
</div>

<div class="row">
  <x-button (click)="customForm()">自定义表单</x-button>
  <x-dialog title="表单" [(visible)]="visibleForm" buttonsCenter>
    <ul class="custom-form">
      <li><x-input label="账号" direction="row"></x-input></li>
      <li><x-input label="邮箱" direction="row"></x-input></li>
      <li><x-radio [data]="['启用', '禁用']" [ngModel]="'启用'"></x-radio></li>
    </ul>
  </x-dialog>
</div>

<div class="row">
  <x-button (click)="custom()">自定义标题以及底部按钮</x-button>
  <x-dialog [title]="titleTpl" [footer]="footerTpl" [(visible)]="visibleCustom">
    <span>天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。</span>
    <ng-template #titleTpl>
      <x-icon type="fto-user"></x-icon>
    </ng-template>
    <ng-template #footerTpl>
      <div class="custom-footer">
        <x-link type="success" (click)="customClose()">知道了</x-link>
      </div>
    </ng-template>
  </x-dialog>
</div>
